<template>
  <div class="box">
    <van-form>
      <h3 @click="goBack">×</h3>
      <h2>密码登录</h2>
      <van-field
        v-model="phone"
        placeholder="手机/用户名"
        name="phone"
        style="backgroundcolor: #fff"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <br />
      <van-field
        v-model="pass"
        placeholder="密码"
        name="pass"
        :rules="[{ required: true, message: '请填写密码' }]"
        clearable
      >
      </van-field>
      <br />
      <!--   <div style="margin: 16px">
          <van-button round block  @click="submit"
          >提交</van-button>
        </div> -->
      <div
        style="
          margin: 16px;
          text-align: center;
          height: 40px;
          line-height: 40px;
          background-color: lightgray;
          border-radius: 15px;
        ">
        <van-button @click="submit">登录</van-button>
        <p class="regg" @click="goReg">立即注册</p>
      </div>
    </van-form>
    <div class="end">
      <van-checkbox v-model="checked">
        已阅读并同意<span>《用户服务协议》</span>、<span>《隐私政策》</span>
      </van-checkbox>
    </div>
  </div>
</template>
  
  <script>
import { user_login } from "../api/index2";

export default {
  name: "Login",
  data() {
    return {
      phone: "",
      pass: "",
      checked: true,
    };
  },
  methods: {
    goBack() {
      this.$router.back();
    },
    submit() {
      if (!this.phone || !this.pass) {
        alert("不能为空");
        return;
      } 
      else {
        user_login({phone:this.phone,pass:this.pass}).then((res) => {
          if (res.data.code == "200") {
            localStorage.setItem("token", res.data.token);
            localStorage.setItem("userid", res.data.userinfo.id);
            localStorage.setItem("username", this.phone);
            this.$router.push("/Index/Home");
          }   
        });
      }
    },
    goReg(){
      this.$router.push("/Register")
    }
  },
};
</script>
  
  <style lang="css" scoped>
.box {
  margin: 0 auto;
}
h3,
.end {
  margin: 15px auto 20px;
  padding: 0 15px;
}
h2 {
  margin: 25px auto 30px;
  padding: 0 15px;
}
.van-form {
  margin-bottom: 200px;
}
.van-button {
  background-color: lightgray;
  border: none;
  height: 30px;
}
.regg{
  color:blue;
  text-align: right;
}
</style>